<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big{
            width: 400px;height: 400px;margin: 20px auto;background-color: red;
            border-radius: 50%;padding: 100px;
        }
        .middle{
            width: 200px;height: 200px;background-color: green;
            border-radius: 50%;padding: 100px;
        }
        .small{
            width: 200px;height: 200px;line-height:200px; background-color: skyblue;text-align: center;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="middle">
            <div class="small">点击的目标元素</div>
        </div>
    </div>
    描述场景：
    当一个元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会在触发。称为事件传播

    注意：
    1. 只会传播同类事件
    2. 只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发
    3. 内部元素不管有没有该事件，只要上层 元素有该事件，那么上层元素的事件就会被触发

    冒泡、捕获、目标
    目标：是点击的在哪个元素，这个事件的目标是什么，当钱操作的元素就是目标
    冒泡：就是从事件目标的事件梳理函数开始，依次往外执行，直到document，从具有目标的元素到不具有的元素
    捕获：最不具体的接收事件，一直到最具体的目标元素
    是从window的事件处理函数，依次向内，只到事件目标的处理函数
    
    事件流：指的是，元素在页面中接收事件的是数学怒，先捕获再冒泡
    <script>
        var small=document.querySelector('.small');
        var middle=document.querySelector('.middle');
        var big=document.querySelector('.big');
        //addEventListener (事件类型，事件处理函数，冒泡false/捕获true)
        small.addEventListener('click',function () {
            alert('small');
        },true)
        middle.addEventListener('click',function () {
            alert('middle');
        },false)
        big.addEventListener('click',function () {
            alert('big');
        },true)
        document.body.addEventListener('click',function () {
            alert('body');
        },false)
        document.documentElement.addEventListener('click',function () {
            alert('html');
        },false)
        document.addEventListener('click',function () {
            alert('document');
        },true)
        // document--big---small---middle---body--html
    </script>
</body>
</html>